<template>
  <div class="app-container">
    <el-row :gutter="20">
      <div class="statisticsBox">
        <el-col :span="9" :xs="24">
          <div class="applied-statistics">
            <div class="title">应用统计</div>
            <div class="appliedBox">
              <div class="countBox">
                <div class="li">
                  <div>
                    <span>{{ authApp.countApp || 0 }}</span> <span>个</span>
                  </div>
                  <span>申码应用</span>
                </div>
                <div class="li">
                  <div>
                    <span>{{ authApp.countbrightApp || 0 }}</span>
                    <span>个</span>
                  </div>
                  <span>亮码应用</span>
                </div>
                <div class="li">
                  <div>
                    <span>{{ authApp.countuseApp || 0 }}</span
                    ><span>个</span>
                  </div>
                  <span>用码应用</span>
                </div>
              </div>
              <div>
                <div id="appliedEchart"></div>
              </div>
            </div>
            <div class="WithCode">
              <div id="WithCodeTypeEchart"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="9" :xs="24">
          <div class="WithCodeIs">
            <div class="title">用码情况</div>
            <div class="applyCodeBox">
              <div class="name">用户申码</div>
              <div class="numBox">
                <div>
                  今日 <span>{{ userApplyApp.today }}</span> 次
                </div>
                <div>
                  本月 <span>{{ userApplyApp.month }}</span> 次
                </div>
                <div>
                  累计 <span>{{ userApplyApp.all }}</span> 次
                </div>
              </div>
              <div id="applyCodeEchart">
                环比<span>{{ userApplyApp.compare }}</span> <span>%</span>
              </div>
            </div>
            <div class="brightCodeBox">
              <div class="name">用户亮码</div>
              <div class="numBox">
                <div>
                  今日 <span>{{ userShowApp.today }}</span> 次
                </div>
                <div>
                  本月 <span>{{ userShowApp.month }}</span> 次
                </div>
                <div>
                  累计 <span>{{ userShowApp.all }}</span> 次
                </div>
              </div>
              <div id="brightCodeEchart">
                环比<span>{{ userShowApp.compare }}</span> <span>%</span>
              </div>
            </div>
            <div class="needCodeBox">
              <div class="name">应用用码</div>
              <div class="numBox">
                <div>
                  今日 <span>{{ userUseApp.today }}</span> 次
                </div>
                <div>
                  本月 <span>{{ userUseApp.month }}</span> 次
                </div>
                <div>
                  累计 <span>{{ userUseApp.all }}</span> 次
                </div>
              </div>
              <div id="needCodeEchart">
                环比<span>{{ userUseApp.compare }}</span> <span>%</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" :xs="24" style="padding-right:30px">
          <div class="withCodeList" style="height: 586px; overflow: auto;margin-left:32px;">
            <div class="title">
              <span>应用用码</span>
              <span>TOP10</span>
            </div>
            <div
              class="li"
              v-for="(item, index) in useAppTop10List"
              :key="index"
            >
              <div>
                <span
                  class="ranking"
                  :class="'index' + index"
                  v-if="index < 3"
                  >{{ index + 1 }}</span
                >
                <span class="name">{{ item.name }}</span>
              </div>
              <span class="num">{{ item.num }}次</span>
            </div>
          </div>
        </el-col>
      </div>
      <div class="ymTitle">用码趋势</div>
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <div class="echartsBox">
            <div class="timeNav" style="text-align: right">
              <span
                @click="selectTime('今日')"
                :class="activeTime == '今日' ? 'active' : ''"
                >今日</span
              >
              <span
                @click="selectTime('近一个月')"
                :class="activeTime == '近一个月' ? 'active' : ''"
                >近一个月</span
              >
              <span
                @click="selectTime('近一年')"
                :class="activeTime == '近一年' ? 'active' : ''"
                >近一年</span
              >
            </div>
            <div id="ymqs"></div>
          </div>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
import {
  queryAppListByCategory,
  queryUseAppTop10,
  queryUserApplyApp,
  queryUserShowApp,
  queryUserUseApp,
  queryUserUseTrend,
  queryUserShowTrend,
  searchCategory,
} from "@/api/system/statistics";
export default {
  data() {
    return {
      appList: [],
      activeTime: "今日",
      authApp: {},
      lineCharts: null,
      useAppTop10List: [],
      userShowApp: {},
      userUseApp: {},
      userApplyApp: {},
      userUseTrend: {},
      userShowTrend: {},
      userCategory: [],
    };
  },
  mounted() {
    this.queryAppListByCategory();
    this.queryUserUseTrend();
    this.queryUserUseApp();
    this.queryUserShowApp();
    this.queryUserApplyApp();
    this.queryUseAppTop10();
    this.searchCategory();
    this.$nextTick(() => {
      this.lineCharts = echarts.init(document.getElementById("ymqs"));
    });
  },
  methods: {
    // 应用类型
    async queryAppListByCategory() {
      let { data } = await queryAppListByCategory();
      this.appList = data.appList;
      // 里面是数组: 申码应用多少个,亮码应用多少个,用码应用多少个
      this.authApp = data.authApp ? data.authApp[0] : {};
      if (data.appList.length > 0) {
        this.appliedStatistics();
      }
    },
    // 用码应用类型
    async searchCategory() {
      let { data } = await searchCategory();
      this.userCategory = data;
      if (data.length > 0) {
        this.WithCodeType();
      }
    },
    // 用码趋势
    async queryUserUseTrend() {
      let { data } = await queryUserUseTrend();
      this.userUseTrend = data;
      this.queryUserShowTrend();
    },
    // 亮码趋势
    async queryUserShowTrend() {
      let { data } = await queryUserShowTrend();
      this.userShowTrend = data;
      this.getYmqs();
    },
    // 用户用码
    async queryUserUseApp() {
      let { data } = await queryUserUseApp();
      this.userUseApp = data;
    },
    // 用户亮码
    async queryUserShowApp() {
      let { data } = await queryUserShowApp();
      this.userShowApp = data;
    },
    // 用户申码
    async queryUserApplyApp() {
      let { data } = await queryUserApplyApp();
      this.userApplyApp = data;
    },
    // 应用用码top10
    async queryUseAppTop10() {
      let { data } = await queryUseAppTop10();
      data.forEach((v, i) => {
        Object.keys(v).forEach((v) => {
          // console.log(v,'取到了key')//取到了key
          // console.log(data[i][v],'取到了值')//取到了值
          var obj = {
            name: v,
            num: data[i][v],
          };
          this.useAppTop10List.push(obj);
        });
      });
    },
    appliedStatistics() {
      if (this.appList.length < 1) {
        return false;
      }
      let myChart = this.$echarts.init(
        document.getElementById("appliedEchart")
      );
      // let color = ["#6d9de0", "#49d896", "#f5d03a", "#f5853a", "#f5503a"];
      var chartData = this.appList.map((item) => {
        return { value: item.count, name: item.categoryName };
      });
      let arrName = [];
      let arrValue = [];
      let sum = 0;
      let pieSeries = [],
        lineYAxis = [];

      // 数据处理
      chartData.forEach((v) => {
        arrName.push(v.name);
        arrValue.push(v.value);
        sum = sum + v.value;
      });

      // 图表option整理
      chartData.forEach((v, i) => {
        // console.log(v,i, v.value,sum - v.value)
        let chartnewData = chartData.slice(0, i);

        let newValue = chartnewData.reduce((a, b) => {
          return a + b.value;
        }, 0);
        v.startAngle = (newValue / sum) * 360;
        pieSeries.push({
          name: "学历",
          type: "pie",
          clockWise: false,
          hoverAnimation: false,
          radius: [75 - i * 15 + "%", 68 - i * 15 + "%"],
          center: ["40%", "50%"],
          label: {
            show: false,
          },
          startAngle: v.startAngle + 90,
          data: [
            {
              value: v.value,
              name: v.name,
            },
            {
              value: sum - v.value,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
            },
          ],
        });
        pieSeries.push({
          name: "",
          type: "pie",
          silent: true,
          z: 1,
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [75 - i * 15 + "%", 68 - i * 15 + "%"],
          // radius: ['50%', '70%'],
          center: ["40%", "50%"],
          label: {
            show: false,
          },
          data: [
            {
              value: sum,
              itemStyle: {
                color: "#e8f4ff", //圆环颜色
              },
            },
            {
              value: 0,
              name: "",
              itemStyle: {
                color: "red",
              },
            },
          ],
        });
        v.percent = ((v.value / sum) * 100).toFixed(0) + "%";
        lineYAxis.push({
          value: i,
          textStyle: {
            rich: {
              circle: {
                // color: color[i],
                padding: [0, 5],
              },
            },
          },
        });
      });
      var option = {
        title: {
          text: "应用类型",
          left: "16%",
          top: "45%",
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0, 0, 0, .8)", //通过设置rgba调节背景颜色与透明度
          textStyle: {
            color: "white",
          },
          position: function (point, params, dom, rect, size) {
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else {
              // 左边放的下
              x = pointX - boxWidth;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else {
              // 上边放得下
              y = pointY - boxHeight;
            }

            return [x, y];
          },
        },
        // color: ["#222FDA ", "#48E3FF", "#3C91FF"], //饼图颜色修改
        // 图列
        legend: {
          orient: "vertical",
          top: "20%",
          right: 20,
          show: true, // 控制图例显示还是隐藏
          icon: "circle",
          selectedMode: true, //取消图例上的点击事件
          formatter: function (name) {
            let target;
            let percent;
            for (let i = 0; i < chartData.length; i++) {
              if (chartData[i].name === name) {
                target = chartData[i].value;
                percent = chartData[i].percent;
              }
            }
            let arr = [
              "{b|" +
                name +
                "}{wire| |}{percent|" +
                percent +
                // +
                // "}{a|" +
                // target +
                // "个
                "}",
            ];
            return arr.join("\n");
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 14,
                color: "##5D6470",
                padding: 10,
              },
              b: {
                fontSize: 14,
                color: "#5D6470",
              },
              wire: {
                color: "#a6acba",
                fontSize: 12,
                padding: 10,
              },
              percent: {
                color: "##828992",
                fontSize: 14,
              },
            },
          },
        },
        series: [
          {
            name: "应用类型",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["25%", "50%"], //距离左右，上下距离的百分比
            avoidLabelOverlap: false,
            itemStyle: {
              // borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "14",
                color: "#222222",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: chartData,
          },
        ],
      };
      myChart.setOption(option);
    },
    WithCodeType() {
      if (this.userCategory.length < 1) {
        return false;
      }
      var chartData = [];
      this.userCategory.forEach((v, i) => {
        var obj = {
          name: v.category,
          value: v.sum,
        };
        chartData.push(obj);
      });
      let myChart = this.$echarts.init(
        document.getElementById("WithCodeTypeEchart")
      );
      var option = {
        // color: ["#222FDA ", "#48E3FF", "#3C91FF"], //饼图颜色修改
        title: {
          text: "用码应用类型",
          // left: "center",
          top: 20,
          left: 20,
        },
        grid: {
          // bottom: 20,
          top: 20,
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0, 0, 0, .8)", //通过设置rgba调节背景颜色与透明度
          textStyle: {
            color: "white",
          },
          position: function (point, params, dom, rect, size) {
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else {
              // 左边放的下
              x = pointX - boxWidth;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else {
              // 上边放得下
              y = pointY - boxHeight;
            }

            return [x, y];
          },
        },
        series: [
          {
            name: "应用类型",
            type: "pie",
            radius: "55%",
            data: chartData,
            label: {
              show: true, // 控制指示线显示还是隐藏
              position: "outside",
            },
            labelLine: {
              show: true,
            },
          },
          {
            name: "应用类型",
            type: "pie",
            radius: "55%",
            data: chartData,
            label: {
              show: true, // 控制指示线显示还是隐藏
              position: "outside",
            },
            labelLine: {
              show: true,
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "inner",
                  formatter: function (data) {
                    return data.percent.toFixed(0) + "%";
                  }, // 设置百分比显示小数保留位数
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    applyCode() {
      let myChart = this.$echarts.init(
        document.getElementById("applyCodeEchart")
      );
      let option = {
        // backgroundColor: "#394056", // 背景色

        tooltip: {
          show: true, // 控制悬浮框
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#57617B",
            },
          },
        },

        grid: {
          top: 0,
          right: 10,
          bottom: 20,
          left: 10,
          containLabel: false,
        },
        xAxis: [
          {
            show: false, // 控制横坐标是否显示
            type: "category",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            data: [
              "13:00",
              "13:05",
              "13:10",
              "13:15",
              "13:20",
              "13:25",
              "13:30",
              "13:35",
              "13:40",
              "13:45",
              "13:50",
              "13:55",
            ], // X 轴后台传过来的值
          },
          {
            axisPointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            axisTick: {
              show: false,
            },

            position: "bottom",
            offset: 20,
          },
        ],
        yAxis: [
          {
            show: false,
            type: "value",
            name: "单位（%）",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
              },
            },
            splitLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
          },
        ],
        series: [
          {
            name: "移动",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1,
                color: "#77E0EF",
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#77E0EF",
                    },
                    {
                      offset: 0.8,
                      color: "#E0F8FC",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: "rgb(137,189,27)",
                borderColor: "rgba(137,189,2,0.27)",
                borderWidth: 12,
              },
            },
            data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122], // Y轴需要后台传递过来
          },
        ],
      };
      myChart.setOption(option);
    },
    //  用户亮码
    getUserCode() {
      let myChart = this.$echarts.init(
        document.getElementById("brightCodeEchart")
      );
      let option = {
        // backgroundColor: "#394056", // 背景色

        tooltip: {
          show: true, // 控制悬浮框
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#57617B",
            },
          },
        },

        grid: {
          top: 0,
          right: 10,
          bottom: 20,
          left: 10,
          containLabel: false,
        },
        xAxis: [
          {
            show: false,
            type: "category",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            data: [
              "13:00",
              "13:05",
              "13:10",
              "13:15",
              "13:20",
              "13:25",
              "13:30",
              "13:35",
              "13:40",
              "13:45",
              "13:50",
              "13:55",
            ],
          },
          {
            axisPointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            axisTick: {
              show: false,
            },

            position: "bottom",
            offset: 20,
          },
        ],
        yAxis: [
          {
            show: false,
            type: "value",
            name: "单位（%）",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
              },
            },
            splitLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
          },
        ],
        series: [
          {
            name: "移动",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1,
                color: "#1A25FF",
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#9595FC",
                    },
                    {
                      offset: 0.8,
                      color: "#F1F0FE",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: "rgb(137,189,27)",
                borderColor: "rgba(137,189,2,0.27)",
                borderWidth: 12,
              },
            },
            data: [56, 45, 67, 134, 145, 56, 133, 56, 145, 76, 145, 67],
          },
        ],
      };
      myChart.setOption(option);
    },
    // 应用用码
    getYInyong() {
      let myChart = this.$echarts.init(
        document.getElementById("needCodeEchart")
      );
      let option = {
        // backgroundColor: "#394056", // 背景色

        tooltip: {
          show: true, // 控制悬浮框
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#57617B",
            },
          },
        },

        grid: {
          top: 0,
          right: 10,
          bottom: 20,
          left: 10,
          containLabel: false,
        },
        xAxis: [
          {
            show: false,
            type: "category",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            data: [
              "13:00",
              "13:05",
              "13:10",
              "13:15",
              "13:20",
              "13:25",
              "13:30",
              "13:35",
              "13:40",
              "13:45",
              "13:50",
              "13:55",
            ],
          },
          {
            axisPointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            axisTick: {
              show: false,
            },

            position: "bottom",
            offset: 20,
          },
        ],
        yAxis: [
          {
            show: false,
            type: "value",
            name: "单位（%）",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
              },
            },
            splitLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
          },
        ],
        series: [
          {
            name: "移动",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1,
                color: "#4596FF",
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#8DBFFF",
                    },
                    {
                      offset: 0.8,
                      color: "#DDECFF",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: "rgb(137,189,27)",
                borderColor: "rgba(137,189,2,0.27)",
                borderWidth: 12,
              },
            },
            data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
          },
        ],
      };
      // myChart.resize();
      myChart.setOption(option);
    },
    // 用码趋势
    getYmqs() {
      window.onresize = () => {
        this.lineCharts.resize({
          width: document.getElementById("ymqs").getBoundingClientRect().width,
        });
      };
      let myChart = this.$echarts.init(document.getElementById("ymqs"));
      var intervalX = 0;
      var trendX = [];
      var trendY = [];
      var trendShowY = [];
      var userUseTrend = this.userUseTrend;

      if (this.activeTime === "今日") {
        intervalX = 24;
        this.userUseTrend.today.forEach((item) => {
          trendX.push(item.createTime);
          trendY.push(item.count);
          if (this.userShowTrend.today.length < 1) {
            trendShowY.push(0);
          }
        });
        this.userShowTrend.today.forEach((item) => {
          trendShowY.push(item.count || 0);
        });
      } else if (
        this.activeTime === "近一个月" ||
        this.activeTime === "近一年"
      ) {
        var userUseTrend =
          this.activeTime === "近一个月"
            ? this.userUseTrend.month
            : this.userUseTrend.year;
        userUseTrend.forEach((v, i) => {
          Object.keys(v).forEach((v) => {
            trendY.push(userUseTrend[i][v] || 0);
            trendX.push(v);
          });
        });
        var userShowTrend =
          this.activeTime === "近一个月"
            ? this.userShowTrend.month
            : this.userShowTrend.year;
        userShowTrend.forEach((v, i) => {
          Object.keys(v).forEach((v) => {
            trendShowY.push(userShowTrend[i][v] || 0);
          });
        });
        intervalX = this.activeTime === "近一个月" ? 3 : 0;
      }
      let option = {
        backgroundColor: "#fff",
        // title: {
        //   text: "全国6月销售统计",
        //   textStyle: {
        //     fontSize: 12,
        //     fontWeight: 400,
        //   },
        //   left: "center",
        //   top: "5%",
        // },
        legend: {
          icon: "roundRect",
          bottom: "0",
          right: "50%",
          itemWidth: 8,
          itemHeight: 8,
          // itemGap: 20,
          textStyle: {
            color: "#556677",
            fontSize: "12",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: true,
              backgroundColor: "#fff",
              color: "#556677",
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(0,0,0,0)",
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 0,
            },
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#5c6c7c",
          },
          padding: [10, 10],
          extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
        },
        grid: {
          top: "7%",
          left: 50,
          right: 40,
          // bottom:10,
        },
        xAxis: [
          {
            type: "category",
            data: trendX,
            axisLine: {
              lineStyle: {
                color: "#DCE2E8",
              },
            },
            splitLine: {
              show: true, // 是否显示网格
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: intervalX, // 设置X轴刻度间隔的距离
              textStyle: {
                color: "#556677",
              },
              // 默认x轴字体大小
              fontSize: 12,
              // margin:文字到x轴的距离
              margin: 15,
            },
            axisPointer: {
              label: {
                // padding: [11, 5, 7],
                padding: [0, 0, 10, 0],
                /*
    除了padding[0]建议必须是0之外，其他三项可随意设置
    
    和CSSpadding相同，[上，右，下，左]
    
    如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同
    
    padding[2]的10:
    
    10 = 文字距下边线的距离 + 下边线的宽度
                
    如：UI图中文字距下边线距离为7 下边线宽度为2
    
    则padding: [0, 0, 9, 0]
                
                */
                // 这里的margin和axisLabel的margin要一致!
                margin: 15,
                // 移入时的字体大小
                fontSize: 12,
                backgroundColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#fff", // 0% 处的颜色
                    },
                    {
                      // offset: 0.9,
                      offset: 0.86,
                      /*
0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）
                        
                        */
                      color: "#fff", // 0% 处的颜色
                    },
                    {
                      offset: 0.86,
                      color: "#33c0cd", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#33c0cd", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            minInterval: 200, // 设置Y轴刻度间隔的距离
            interval: 200, //每次增加几个 设置Y轴刻度间隔的距离
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#DCE2E8",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#556677",
              },
            },
            splitLine: {
              show: true, // 是否显示网格
            },
          },
          {
            type: "value",
            position: "right",
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#556677",
              },
              formatter: "{value}",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#DCE2E8",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "亮码",
            type: "line",
            data: trendShowY,
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 3,
              color: "#48E3FF",
              shadowColor: "rgba(115,221,255, 0.6)",
              shadowBlur: 10,
              shadowOffsetY: 20,
            },
            itemStyle: {
              normal: {
                color: "#48E3FF",
                borderColor: "#48E3FF",
              },
            },
          },
          {
            barMaxWidth: "100%",
            name: "用码",
            type: "line",
            data: trendY,
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 3,
              color: "#3140FF",
              shadowColor: "rgba(158,135,255, 0.6)",
              shadowBlur: 10,
              shadowOffsetY: 20,
            },
            itemStyle: {
              normal: {
                color: "#3140FF",
                borderColor: "#3140FF",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    selectTime(value) {
      this.activeTime = value;
      // 调接口
      this.getYmqs();
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  background-color: #f5f6fa;
  //   height: 100vh;
  box-sizing: border-box;
  padding-left: 20px;
  box-sizing: border-box;
  padding-right: 30px;
  padding-top: 0px;
}
.statisticsBox {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding-left: 13px;
  .applied-statistics {
    // width: 460px;
    width: 100%;
    // flex: 1;
    .title {
      color: #000000;
      font-size: 24px;
      line-height: 65px;
      margin-bottom: 0px;
      text-align: left;
    }
    .appliedBox {
      width: 100%;
      border-radius: 10px;
      background-color: #fff;
      padding-top: 25px;
      padding-right: 19px;
      padding-left: 19px;
      box-sizing: border-box;
      box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.06);
      //   height: 280px;
      .countBox {
        display: flex;
        border-bottom: 1px solid #91a9c0;
        padding-bottom: 17px;
        // width: 460px;
        width: 100%;
        .li {
          flex: 1;
          text-align: center;
          div {
            color: #4d79f3;
            height: 30px;
            span {
              font-size: 30px;
              &:last-of-type {
                font-size: 14px;
              }
            }
          }
          & > span {
            color: #606266;
            font-size: 12px;
          }
          &:nth-of-type(2) {
            div {
              color: #775dde;
            }
          }
          &:nth-of-type(3) {
            div {
              color: #f8b61b;
            }
          }
        }
      }
      & > div {
        display: flex;
        justify-content: space-between;
        #appliedEchart {
          // width: 460px;
          width: 98%;
          height: 220px;
          background-color: white;
          border-radius: 10px;
        }
        .right {
          padding-top: 46px;
          div {
            margin-top: 16px;
            .circle {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background-color: #3c91ff;
              margin-right: 7px;
              display: inline-block;
            }
            .divide {
              height: 12px;
              border-right: 1px solid #e0e5f0;
              margin: 0px 8px 0px 16px;
            }
            &:nth-of-type(2) {
              .circle {
                background-color: #0bffdb;
              }
            }
            &:nth-of-type(3) {
              .circle {
                background-color: #222fda;
              }
            }
            span {
              color: #5d6470;
              font-size: 14px;
              &:nth-of-type(2) {
                color: #828992;
                margin-right: 24px;
              }
              &:nth-of-type(3) {
                color: #5d6470;
              }
            }
          }
        }
      }
    }
    .WithCode {
      margin: 17px auto 0px;
      width: 100%;
      border-radius: 10px;
      background-color: #fff;
      // padding-top: 20px;
      padding-right: 40px;
      box-sizing: border-box;
      height: 260px;
      box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.06);
      .name {
        font-size: 16px;
        color: #000000;
        margin-left: 20px;
        margin-bottom: 20px;
      }
      #WithCodeTypeEchart {
        width: 100%;
        height: 100%;
        // margin: 0 auto;
      }
    }
  }
}
.WithCodeIs {
  // flex: 1;
  width: 420px;
  width: 100%;
  margin-left: 16px;
  margin-right: 16px;
  .title {
    color: #000000;
    font-size: 24px;
    line-height: 65px;
    text-align: left;
    margin-bottom: 0px;
  }
  .applyCodeBox,
  .brightCodeBox,
  .needCodeBox {
    height: 186px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 16px;
    box-sizing: border-box;
    padding-top: 20px;
    .name {
      font-size: 16px;
      color: #000000;
      margin-left: 20px;
    }
    .numBox {
      display: flex;
      font-size: 12px;
      color: #828992;
      margin-top: 24px;
      box-sizing: border-box;
      padding: 0px 20px;
      div {
        flex: 1;
        text-align: left;
      }
      span {
        color: #222222;
        font-size: 18px;
        margin: 0px 4px;
      }
    }
  }
  #applyCodeEchart,
  #brightCodeEchart,
  #needCodeEchart {
    width: 379px;
    height: 110px;
    margin-left: 20px;
    margin-top: 20px;
    font-size: 12px;
    color: #828992;
    span {
      &:nth-of-type(1) {
        color: #222222;
        font-size: 18px;
        margin: 0px 4px;
      }
    }
  }
}
.withCodeList {
  margin-top: 65px;
  // flex: 1;
  width: 250px;
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  .title {
    color: #000000;
    line-height: 47px;
    font-size: 16px;
    font-weight: 600;
    padding: 0px 20px;
    margin: 0;
    box-sizing: border-box;
    border-bottom: 1px solid #91a9c0;
  }
  .li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #91a9c0;
    line-height: 47px;
    padding: 0px 20px;
    box-sizing: border-box;
    &:last-of-type {
      border-bottom: none;
    }
    div {
      .ranking {
        display: inline-block;
        font-size: 12px;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        color: #fff;
        margin-right: 4px;
        &.index0 {
          background-color: #4753ff;
        }
        &.index1 {
          background-color: #3c91ff;
        }
        &.index2 {
          background-color: #63e7ff;
        }
      }
      .name {
        color: #222222;
        font-size: 14px;
      }
    }
    // &:first-of-type{
    //   div{
    //             .ranking{
    //     background-color: #4753ff;
    //    }
    //   }

    // }
    // &:nth-of-type(2) {
    //   div{
    //      .ranking{
    //        background-color: #3c91ff;
    //    }
    //   }

    // }
    // &:nth-of-type(3) {
    //   div{
    //        .ranking{
    //       background-color: #63e7ff;
    //    }
    //   }

    // }
    .num {
      font-size: 14px;
      color: #5d6470;
    }
  }
}
.ymTitle {
  color: #000000;
  font-size: 24px;
  margin-bottom: 18px;
  margin-left: 16px;
}
.echartsBox {
  background-color: #fff;
  width: calc(100vw - 280px);
  margin-left: 15px;
  // width: 100%;
  // margin: 0 auto;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  box-sizing: border-box;
  padding-bottom: 20px;
  padding-left: 16px;
  .timeNav {
    padding-top: 20px;
    padding-right: 20px;
    span {
      display: inline-block;
      background-color: #f0f4ff;
      height: 32px;
      text-align: center;
      width: 104px;
      font-size: 13px;
      color: #383d4a;
      line-height: 32px;
      &.active {
        color: #ffffff;
        background-color: #3240ff;
      }
      &:nth-of-type(1) {
        border-radius: 4px 0px 0px 4px;
      }
      &:nth-of-type(3) {
        border-radius: 0px 4px 4px 0px;
      }
    }
  }
  #ymqs {
    height: 300px;
    width: calc(100vw - 300px);
    // width: 90%;
    margin-right: 20px;
  }
}
</style>